<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      li{
        line-height: 40px
      }
      span{
        color: red
      }
    </style>
</head>
<body>
  <h2>其他</h2>
  <ul>
    <li>
      <h3>阴影</h3>
      <ul>
        <li>阴影颜色： shoadowColor</li>
        <li>X 方向偏移量： shadowOffsetX</li>
        <li>Y 方向偏移量：shadowOffsetY</li>
        <li>模糊的像素数： shadowBlur</li>
      </ul>
    </li>
    <li>
      <h3>渐变</h3>
      <ul>
        <li>渐变由 CanvasGradient 实例表示。可以通过 2d 上下文来创建和修改。可以通过 createLinearGradient()方法。</li>
        <li>
          createLinearGradient()方法接受 4 个参数。起点的 X 坐标，Y 坐标。终点的 X 坐标Y 坐标</li>
        <li>
          创建了渐变对象之后，下一步就是使用 addColorStop()来指定色标。接受两个参数，色标位置和 CSS 颜色值
        </li>
      </ul>
    </li>
    <li>
      <h3>模式</h3>
      <ul>
        <li>
          模式其实就是重复重复的图像。可一调用 createPattern 方法并传入两个参数来创建新的模式。
        </li>
        <li>该方法接受两个参数，一个 HTML （img）标签。和一个表示如何重复的字符串，类似于 css 的 background-repeat 属性值</li>
        <li>createPattern 方法的第一个参数也是可以是一个video 标签或者另一个 canvas 元素</li>
      </ul>
    </li>
    <li>
      <h3>使用图像数据</h3>
      <ul>
        <li>
          2D上下文的一个明显长处是，可以通过 getImageData 取得原始图像数据，这个方法接受 4 个参数，要取得的其数据的画面区域的 x 和 y 坐标以及该区域的像素宽度和高度
        </li>
        <li>
          返回的是一个 imageData 实例。有三个属性，width,height 和 data.其中 data 属性是一个数组，保存着图像中每一个像素的数据。
        </li>
        <li>
          在 data 数组中，每一个像素用 4 个元素来保存。分别表示红，绿，蓝和透明度
        </li>
      </ul>
    </li>
  </ul>
  
  
 
</body>
</html>